<!-- 友伴官页面 -->
<template>
	<view class="page-box">
		<view class="artist-box">
			<view class="artist-box-t">
				<view :class="{
					'header0':true,
					'header1':operateType
				}" id="header">
					<view class="header">

						<!-- 重写的定位组件 -->
						<locationBox ref="location"></locationBox>

						<view class="search">
							<uv-search v-model="search" height="28" placeholder="友伴姓名/标签"
								@custom="handleSearch">
							</uv-search>
						</view>

						<!-- 筛选按钮 -->
						<view class="header-right" @click="setScreenPopShow(true)">
							<uni-icons custom-prefix="iconfont2" type="icon-shaixuan" size="40rpx"
								color="#333"></uni-icons>
							<text>筛选</text>
						</view>
					</view>
					<view class="tabs">
						<!-- :list="classifyData" -->
						<uv-tabs keyName="title" :list="classifyData2" @change="handleTabChange" lineColor="#EC606F"
							:current="tabsCurrent"
							:activeStyle="{ color: '#0F0F0F', fontFamily: 'PingFang SC', fontWeight: 'medium', fontSize: '16px' }"></uv-tabs>
						<view class="second-directory" v-if="activeTabs">
							<view :class="childrenCateId == item.id ? 'directoryCheck' : 'directory'"
								v-for="item in activeTabs.cateList" :key="item.id" @tap="handleCateId(item)">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>

				<view class="zhanwei" :style="{height: headerHeight === 1 ? '292rpx' : '230rpx'}"></view>
			</view>


			<view class="artist-box-c">

				<!-- 现在写的艺人列表 -->
				<artistListBox :data="artistListData" :page="1"></artistListBox>
				<view class="loading" v-if="artistListData.length > 0">
					<uni-load-more :status="loadingType"></uni-load-more>
				</view>
			</view>

		</view>



		<tabBar></tabBar>

		<!-- 悬浮按钮 -->
		<fab-all></fab-all>

		<!-- 弹出层 -->
		<ScreenPop :show="screenPopShow" @setShow="setScreenPopShow" @submit="setScreenValue"></ScreenPop>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'


	// 公共方法
	import cookie from '@/utils/cookie.js'

	// api请求
	import {
		postArtistList, // 获取艺人列表
		getCateApi, // 获取艺人分类
	} from '@/api/artist.js'


	// 页面组件
	import ScreenPop from './components/screenPop.vue' // 筛选组件

	export default {
		name: 'artist',
		components: {
			ScreenPop
		},
		props: {

			/**
			 * 是否要浮动
			 */
			operateType: {
				type: Boolean,
				default: false
			},

			/**
			 * 艺人分类数据
			 */
			classifyData: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				headerHeight: 0, // 0是选择的全部，1是其他
				// headerHeight2: 0, // head高度

				search: '', // 搜索框数据

				classifyData2: [], // 艺人分类数据


				tabsCurrent: 0, // tabs当前页
				tagId: null, // 选中哪个标签
				leve: 0, // 是否是父标签，0是父标签，null是子标签
				tabsData: {}, //标签数据
				activeTabs: {}, //子标签数据
				childrenCateId: 0, // 选中的子标签

				screenPopShow: false, // 是否显示筛选组件
				screenData: {}, // 筛选的数据


				artistListData: [], // 艺人数据
				artistPageNum: 1, // 艺人数据当前页

				loadingType: 'loading', // 是否显示更多

			}
		},

		computed: {
			...mapGetters(['locationInfo']),
		},

		watch: {
			locationInfo: {
				handler(val, val2) {
					this.init()
				},
				deep: true
			},

			classifyData: {
				handler() {
					if (this.classifyData.length > 0) {
						this.getCate()
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			...mapActions(['getCheckMethod']),

			/**
			 * 关闭弹窗
			 */
			closePopShow1() {
				this.$nextTick(() => {
					this.$refs.location.closePopShow()
				})
			},


			/**
			 * 原show方法
			 */
			myShow() {

				const num1 = uni.getStorageSync('cateId');
				this.headerHeight = num1 ? 1 : 0

				// 切换父标签
				if (this.classifyData2.length > 0) {
					this.handleTabChange({
						index: num1,
						...this.classifyData2[num1]
					})
				} else {
					this.init()
				}
			},

			/**
			 * 原触底方法
			 */
			myReachBottom() {
				this.artistPageNum++
				this.getPostArtistList({
					pageNum: this.artistPageNum,
					pageSize: 10
				})
			},



			/**
			 * 初始化
			 */
			init() {
				// #ifdef MP-WEIXIN
				// 判断登录状态跳转页面
				this.getCheckMethod()
				//#endif


				this.artistPageNum = 1
				this.artistListData = []

				// loading状态
				this.loadingType = 'loading'

				this.getPostArtistList({
					pageNum: this.artistPageNum,
					pageSize: 10
				})
			},
			/**
			 * 获取艺人列表
			 */
			async getPostArtistList(params) {
				let obj = params

				// 加入地址数据
				for (let key in this.locationInfo) {
					if (this.locationInfo[key] !== '') {
						obj[key] = this.locationInfo[key]

					}
				}


				// 加入筛选数据
				Object.assign(obj, this.screenData)

				// 加入leve和tag
				obj['leve'] = this.leve
				obj['tag'] = this.search

				// 加入标签数据
				obj['cateId'] = this.tagId






				try {
					const res = await postArtistList(obj);

					if (res.rows.length < 10) {
						this.loadingType = 'noMore'
					}

					if (res.code !== 200) {
						return
					}

					this.artistListData.push(...res.rows)


				} catch (error) {
					console.error(error, '获取艺人列表报错');
				}

			},

			/**
			 * 切换父标签
			 */
			handleTabChange(value) {
				// 当前是哪个父标签
				cookie.set('cateId', value.index)
				this.headerHeight = value.index ? 1 : 0

				this.tabsCurrent = value.index
				this.leve = 0
				this.tagId = value.id

				this.activeTabs = this.classifyData2[value.id]

				this.init()

			},

			/**
			 * 点击子标签
			 */
			handleCateId(e, val) {

				this.tagId = e.id
				this.childrenCateId = e.id
				this.leve = null
				this.init()


			},


			/**
			 * 打开筛选
			 */
			setScreenPopShow(val) {
				this.screenPopShow = val
			},

			/**
			 * 筛选取值
			 */
			setScreenValue(val) {
				let sertch = {}

				// 格式化筛选的值
				val.map(res => {
					if (res.title === '性别') {
						switch (res.data[0]) {
							case '男友伴':
								sertch['gender'] = 1;
								break;
							case '女友伴':
								sertch['gender'] = 2;
								break;
						}
					}

					if (res.title === '年龄') {
						sertch['minAge'] = res.data[0]
						sertch['maxAge'] = res.data[1]
					}

					if (res.title === '身高') {
						sertch['minHeight'] = res.data[0]
						sertch['maxHeight'] = res.data[1]
					}

					/*暂时不知道leve需要传入哪些值
					if(res.title === '等级'){
						switch(res.data[0]){
							case '全部': sertch['leve'] = 0;
							break;
							case '模特': sertch['leve'] = 1;
							break;
							case '艺人': sertch['leve'] = 1;
							break;
						}
					}
					*/
				})

				// 赋值筛选的值
				this.screenData = sertch

				// 关闭弹窗
				this.setScreenPopShow(false)

				this.init()

			},






			// 查询
			handleSearch(value) {
				this.search = value
				this.init()
			},




			/**
			 * 获取艺人分类
			 */
			getCate(params) {
				let obj = {
					cateList: [],
					id: 0,
					parentId: null,
					rect: {
						bottom: 290,
						dataset: {},
						height: 44,
						id: "",
						left: 5,
						right: 59,
						top: 246,
						width: 54,
					},
					sort: 0,
					title: "全部"
				}
				this.classifyData2 = [obj, ...this.classifyData]

				// 子标签数据
				const num1 = uni.getStorageSync('cateId');
				let num2 = num1 ? num1 : 0
				this.activeTabs = this.classifyData2[num2]
				this.tabsCurrent = num2
			},

			/**
			 * 处理艺人分类数据
			 */
			initClassifyData(data) {
				let data2 = []
				data2.push({
					id: 0,
					title: "全部",
					cateList: []
				})

				function dataSort(val) {

					// 排序
					val.sort(function(a, b) {
						if (a.sort < b.sort) {
							return -1;
						}
						if (a.sort > b.sort) {
							return 1;
						}
						return 0;
					})
				}

				// 先把第一层放入数组
				data.map(res => {
					if (res.parentId === null) {
						data2.push({
							id: res.id,
							title: res.title,
							sort: res.sort,
							parentId: res.parentId,
							cateList: []
						})
					}
				})

				// 排序
				dataSort(data2)

				// 再将第二层放入数组
				data2.forEach((res, index) => {
					data.map(res2 => {
						if (res2.parentId === res.id) {
							data2[index].cateList.push({
								id: res2.id,
								title: res2.title,
								sort: res2.sort,
								parentId: res2.parentId
							})
						}
					})

					// 排序
					dataSort(data2[index].cateList)
				})

				return data2;
			},

		}
	}
</script>

<style lang="less" scoped>
	.page-box {
		position: relative;
		box-sizing: border-box;

		&::before {
			display: inline-block;
			content: '';
			width: 750rpx;
			height: 561rpx;
		}

		.header {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			padding: 0 24rpx;
			width: 100%;

			.search {
				flex: 1;
				box-sizing: border-box;
				padding: 0 24rpx;
				border-radius: 26rpx;
			}

			.header-right {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #666;
				font-size: 24rpx;
			}
		}

		.tabs {
			padding: 22rpx 10rpx 0rpx 10rpx;

			.second-directory {
				padding: 15rpx 22rpx 0 22rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				gap: 16rpx;
			}

			.directory {
				height: 44rpx;
				padding: 0 14rpx;
				border-radius: 22rpx;
				border: 2rpx solid #D5CFD2;
				opacity: 1;
				color: #3C4766;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 24rpx;
				line-height: 44rpx;
			}

			.directoryCheck {
				height: 44rpx;
				padding: 0 14rpx;
				border-radius: 22rpx;
				border: 2rpx solid #EC606F;
				opacity: 1;
				color: #EC606F;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 24rpx;
				line-height: 44rpx;
			}
		}
	}

	.artist-box-c {
		// background: #F3F0F0;
		box-sizing: border-box;
		padding: 0 32rpx !important;
		width: 100% !important;


		.loading {
			padding-bottom: 160rpx;
		}
	}


	.artist-box {
		position: absolute;
		top: 0;
		display: flex;
		flex-direction: column;
		width: 100%;

		.artist-box-t {

			.header0 {
				display: flex;
				flex-direction: column;
				position: absolute;
				width: 100%;
				#padding(30rpx 0);

			}

			.header1 {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				background: #f6e8e9;
				z-index: 1000;
			}

			.zhanwei {
				display: block;
				content: "";
				width: 100%;
				#padding(30rpx 0);
			}

		}




		&-c {
			padding: 0 32rpx;
		}

		.diamond-box {
			display: flex;
			flex-wrap: wrap;
			margin: 16rpx 0 -32rpx 0;

			.select {
				text {
					color: #E27C8A;
				}
			}

			.item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #0F0D21;
				font-size: 20rpx;
				margin-bottom: 32rpx;

				&>view {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					background-color: #D5CFD2;
					border-radius: 50%;

					&>image {
						width: 42rpx;
						height: 42rpx;
					}
				}

				text {
					margin-top: 8rpx;
				}
			}
		}
	}
</style>